<template>
  <div class="box">
    <div class="dv1">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(v, index) in arr" :key="index">
          <img :src="v.src" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="dv2">
      <div class="dv2-2">
        <div
          class="list"
          v-for="(v, index) in arr1"
          :key="index"
          style="width: 23.4667vw; height: 40.8vw"
        >
          <img :src="v.img" alt="" style="width: 17.6vw" />
          <p class="txt1">{{ v.txt1 }}</p>
          <p class="txt2">{{ v.txt2 }}</p>
        </div>
      </div>
    </div>
    <div class="dv3">
      <div class="top" style="margin: 9.3333vw 0 0 1.8667vw">
        <img
          src="https://m11.360buyimg.com/babel/s168x168_jfs/t1/176102/9/8323/880714/60950796E72632df2/cf9230cd281ebd32.png.webp"
          alt=""
        />
        <p
          style="
            display: flex;
            flex-direction: column;
            justify-content: space-around;
          "
        >
          <b>
            <span class="span1" style="font-size: 3.4667vw; margin: 0"
              >35英寸以下电…</span
            ></b
          ><br />
          <span class="span2" style="font-size: 3.2vw"
            ><img
              src="https://m.360buyimg.com/babel/jfs/t1/36407/35/19147/554/63adaea1F633dfe3b/5e562562eceabd9a.png"
              alt=""
              style="width: 3.2vw"
            />
            7.7万人买过</span
          >
        </p>
      </div>
      <div class="top" style="margin: 3vw 0 0 2.5vw">
        <img
          src="https://m11.360buyimg.com/babel/s168x168_jfs/t1/89233/39/16356/654167/5e79e07cE86f3e556/77d68e5101a6859d.png.webp"
          alt=""
        />
        <p
          style="
            display: flex;
            flex-direction: column;
            justify-content: space-around;
          "
        >
          <b>
            <span class="span1" style="font-size: 3.4667vw; margin: 0"
              >SATA2T硬盘榜</span
            ></b
          ><br />
          <span class="span2" style="font-size: 3.2vw"
            ><img
              src="https://m.360buyimg.com/babel/jfs/t1/36407/35/19147/554/63adaea1F633dfe3b/5e562562eceabd9a.png"
              alt=""
              style="width: 3.2vw"
            />
            9.2万人买过</span
          >
        </p>
      </div>
    </div>
    <div class="dv4">
      <van-swipe>
        <van-swipe-item v-for="(v, index) in arr2" :key="index">
          <img
            :src="v.img"
            style="width: 43.1333vw; height: 29.8667vw; margin-top: 8vw"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import axios from "axios";
let service = axios.create();
export default {
  data() {
    return {
      arr: [],
      arr1: [],
      arr2: [],
    };
  },
  mounted() {
    service({
      url: "http://localhost:3000/Cybersbody1",
      methed: "get",
    }).then((res) => {
      this.arr = res.data;
      // console.log(res.data);
    });
    service({
      url: "http://localhost:3000/Cybersbody2",
      methed: "get",
    }).then((res) => {
      this.arr1 = res.data;
      // console.log(res.data);
    });
    service({
      url: "http://localhost:3000/Cybersbody3",
      methed: "get",
    }).then((res) => {
      this.arr2 = res.data;
      // console.log(res.data);
    });
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 83.4667vw;
  margin: 2.6667vw 0 2.6667vw 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow: hidden;
}
.dv1 {
  width: 47%;
  height: 40.8vw;
  margin: 1.0667vw;
  background: url(https://m11.360buyimg.com/babel/s522x459_jfs/t1/125838/37/29192/7559/63ae8830F245e0847/ad75c21b11e557ee.png.webp);
  background-size: 100%;
  border-radius: 1.3333vw;
}
.dv1 img {
  display: block;
  width: 100%;
  height: 40.8vw;
  border-radius: 1.3333vw;
}
.dv2 {
  width: 47%;
  height: 40.8vw;
  margin: 1.0667vw;
  background: url(https://m11.360buyimg.com/babel/s522x459_jfs/t1/194065/20/31216/5074/63adbcb0Fd24291f5/2deae1ac0bba1063.png.webp);
  background-size: 100%;
  overflow: scroll;
  border-radius: 1.3333vw;
}
.dv2 .dv2-2 {
  width: 300%;
  height: 40.8vw;
  display: flex;
}
.dv2 .dv2-2 .list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dv2 .txt1 {
  width: 23.2vw;
  height: 8.8vw;
  background: url(https://m11.360buyimg.com/babel/s262x99_jfs/t1/167121/21/29539/15167/63adbcbeF21a51f07/fd76b6af97795595.png.webp);
  background-size: 100%;
  text-align: center;
  color: #fff;
}
.dv2 .txt2 {
  width: 20.8vw;
  height: 5.3333vw;
  font-size: 3.2vw;
  text-align: center;
  margin: 0;
  color: #fa785e;
}
.dv3 {
  width: 47%;
  height: 40.8vw;
  margin: 1.0667vw;
  background: url(https://m11.360buyimg.com/babel/s522x459_jfs/t1/58038/8/17225/6457/63adadcfFa0bdbd9f/42caf48aa671682b.png.webp);
  background-size: 100%;
  border-radius: 2.6667vw;
}
.dv3 .top {
  width: 45.6vw;
  height: 13.6vw;

  display: flex;
  align-content: center;
}
.dv4 {
  width: 47%;
  height: 40.8vw;
  margin: 1.0667vw;
  background: url(https://m11.360buyimg.com/babel/s522x459_jfs/t1/76879/15/23729/5328/63adb940F3d8570ff/13127bad60d53ddb.png.webp);
  background-size: 100%;
  text-align: center;
  border-radius: 2.6667vw;
}
</style>